<style>
* {
    margin: 0px;
    padding: 0px;
}

.content {
    width: 100%;
    height: 100vh;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login {
    width: 300px;
    height: 300px;
    margin-top: 200px;
}

.login>h1 {
    /* background-color: aqua; */
    text-align: center;
}
</style>

<template>
    <div class="content">

        <div class="login">
            <h1>用户登录</h1>
            <div style="margin-top: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="用户名">
                    <el-input v-model="userInfo.name" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="userInfo.pwd" type="password" placeholder="请输入密码" show-password />
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="getLogin">登录</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, el } from 'element-plus';
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()

//设置用户名、密码信息位置
const labelPosition = ref('top')

//设置正确的用户名/密码
const rightInfo = ref({ name: 'admin', pwd: '123456' })
//重置
function resetForm() {
    userInfo.value.name = ''
    userInfo.value.pwd = ''
}
//存储用户输入的登录信息
const userInfo = ref({
    name: '',
    pwd: ''
})
//登录
function getLogin() {

    // // 发起一个post请求
    // axios({
    //     method: 'post',
    //     url: '/api/login',
    //     data: {
    //         username: userInfo.value.name,
    //         password: userInfo.value.pwd
    //     }
    // }).then(response => {
    //     // 在这里处理请求成功的情况
    //     console.log(response.data.data); // 可以打印出返回的数据
    //     if (response.data.data != null) {
    //         sessionStorage.setItem("token", response.data.data);
    //         ElMessage({
    //             message: '登录成功',
    //             type: 'success',
    //         });
    //         //登录成功后跳转到首页
    //         router.push({ path: '/', query: { name: userInfo.value.name } });
    //     } else {
    //         ElMessage.error('用户名或密码不正确，登录失败!!!')
    //     }
    // });

    axios.post('/api/login', {
        username: userInfo.value.name,
        password: userInfo.value.pwd
    }).then(function (response) {
        // 在这里处理请求成功的情况
        console.log(response.data.data); // 可以打印出返回的数据
        if (response.data.data != null) {
            sessionStorage.setItem("token", response.data.data);
            ElMessage({
                message: '登录成功',
                type: 'success',
            });
            //登录成功后跳转到首页
            router.push({ path: '/' });
        } else {
            ElMessage.error('用户名或密码不正确，登录失败!!!')
        }
    })
        .catch(function (error) {
            console.log(error);
        });


    // if (userInfo.value.name == rightInfo.value.name && userInfo.value.pwd == rightInfo.value.pwd) {
    //     ElMessage({
    //         message: '登录成功',
    //         type: 'success',
    //     });
    //     //登录成功后跳转到首页
    //     router.push({ path: '/', query: { name: userInfo.value.name } });
    // } else {
    //     ElMessage.error('用户名或密码不正确，登录失败!!!')
    // }
}
</script>
  